{% extends 'base.html' %}
{% block content %}
    <style>
         .big-box-2 {
            width: 100%;
             display: flex;
        }
        .left-box {
            width: 900px;
            margin-left: 150px;
        }
        a {
            color: black;
        }
         .l1 {
            display: inline-block;
            width: 900px;
        }
        .l2 {
            display: inline-block;
            width: 900px;
            margin-top: -5px;
            background: white;
        }
        .l2-1 {
            display: flex;
            width: 900px;
            border: #dfdfdf dashed 2px;
        }
        .l2-1-2 {
            width: 585px;
            height: 170px;
            margin-left: 314px;
            margin-top: 10px;
            border-bottom: #c9c7c5 dashed 2px;
        }
        .l2-1-2 p {
            font-size: 15px;
        }
        h1 {
            width: 650px;
            height: 40px;
            font-size: 30px;
            font-weight: normal;
        }
        .l2 img {
            float: left;
            margin-top: 16px;
            margin-left: 10px;
        }
        .l2-1 a {
            color: black;
            text-decoration: none;
        }
        .l2-1 a:hover {
            color:rgba(192, 248, 235, 0.89);
        }
        .l3 {
            display: flex;
            width: 700px;
            height: 50px;
            margin-top: 4px;
            margin-left: 125px;
        }
        .l3 a {
            text-align: center;
            width: 95px;
            color: black;
            font-size: 30px;
            margin-left: -5px;
            border: 1px black dashed;
        }
        .l3 a:hover {
            color: white;
            background: #00b7ee;
        }
        .text1 {
            width:100%;
            padding-right:36px;
            display:-webkit-box;
            -webkit-box-orient:vertical;
            -webkit-line-clamp:2;  //显示文字行数。
            overflow:hidden;
            overflow: hidden;
        }
        .right {
            width: 400px;
            right: 0px;
            top: 160px;
            margin-left: 100px;
        }
        .search {
            width: 100%;
            background-color: #563d7c;
            padding: 15px 10px 15px 10px;
        }
        .search>input {
            height: 31px;
            line-height: 31px;
            font-size: 18px;
            border: 0;
            border-radius: 5px;
            outline: none;
            padding-left: 5px;
        }
        .search>button {
            font-size: 18px;
            padding: 6px 7px 6px 7px;
            border-radius: 5px;
            margin-left: 60px;
        }
        .hot {
            width: 100%;
            height: 500px;
            border: 1px dashed #563d7c;
            margin: 50px 0px;
        }
        .new {
            width: 100%;
            height: 500px;
            border: 1px dashed #563d7c;
        }
        .active {
            background-color: #00b7ee;
            color: white;
        }
        .zuixin {
            background: #563d7c;
            height: 40px;
            color: white;
            font-size: 25px;
            margin-top: -15px;
        }
        .zuixin p {
            margin-left: 10px;
        }
        .hot p {
            margin-left: 10px;
            font-size: 24px;
            margin-top: 15px;
        }
        .tebie {
            background: #563d7c;
            height: 40px;
            color: white;
            font-size: 25px;
            margin-top: -15px;
        }
        .tebie p {
            margin-left: 10px;
        }
        .new p {
            margin-left: 10px;
            font-size: 24px;
            margin-top: 15px;
        }
    </style>
<div class="big-box-2">
    <div class="left-box">
        <div class="l1">
            <img src="/img/A@%60ITU$1M%5D%25CU%60N_RQ2VD6W_tmb.jpg" alt="" width="900">
        </div>
        <div class="l2">
            <div class="l2-1">
                <div class="l2-1-1">
                    <img src="/img/O8R1X%6054$6%5D@SQQ61VH200H_tmb.jpg" alt="" width="300" height="160">
                </div>
                <a href="article/articles[i].articleid">
                <div class="l2-1-2">
                    <h1>强哥聊：IT行业激荡30年-技术与架构演进</h1>
                    <p>
                        作者：2 &nbsp;&nbsp;
                        类别：1&nbsp;&nbsp;
                        日期：Mon,06 Apr 2020 00：53：46 GMT&nbsp;&nbsp;
                        阅读：6次&nbsp;&nbsp;
                        消耗积分：2
                    </p>
                    <br>
                    <p class="text1"></p>
                </div>
                </a>
            </div>
            <div class="l2-1">
                <div class="l2-1-1">
                    <img src="/img/O8R1X%6054$6%5D@SQQ61VH200H_tmb.jpg" alt="" width="300" height="160">
                </div>
                <a href="article/articles[i].articleid">
                <div class="l2-1-2">
                    <h1>强哥聊：IT行业激荡30年-技术与架构演进</h1>
                    <p>
                        作者：2 &nbsp;&nbsp;
                        类别：1&nbsp;&nbsp;
                        日期：Mon,06 Apr 2020 00：53：46 GMT&nbsp;&nbsp;
                        阅读：6次&nbsp;&nbsp;
                        消耗积分：2
                    </p>
                    <br>
                    <p class="text1"></p>
                </div>
                </a>
            </div>
            <div class="l2-1">
                <div class="l2-1-1">
                    <img src="/img/O8R1X%6054$6%5D@SQQ61VH200H_tmb.jpg" alt="" width="300" height="160">
                </div>
                <a href="article/articles[i].articleid">
                <div class="l2-1-2">
                    <h1>强哥聊：IT行业激荡30年-技术与架构演进</h1>
                    <p>
                        作者：2 &nbsp;&nbsp;
                        类别：1&nbsp;&nbsp;
                        日期：Mon,06 Apr 2020 00：53：46 GMT&nbsp;&nbsp;
                        阅读：6次&nbsp;&nbsp;
                        消耗积分：2
                    </p>
                    <br>
                    <p class="text1"></p>
                </div>
                </a>
            </div>
            <div class="l2-1">
                <div class="l2-1-1">
                    <img src="/img/O8R1X%6054$6%5D@SQQ61VH200H_tmb.jpg" alt="" width="300" height="160">
                </div>
                <a href="article/articles[i].articleid">
                <div class="l2-1-2">
                    <h1>强哥聊：IT行业激荡30年-技术与架构演进</h1>
                    <p>
                        作者：2 &nbsp;&nbsp;
                        类别：1&nbsp;&nbsp;
                        日期：Mon,06 Apr 2020 00：53：46 GMT&nbsp;&nbsp;
                        阅读：6次&nbsp;&nbsp;
                        消耗积分：2
                    </p>
                    <br>
                    <p class="text1"></p>
                </div>
                </a>
            </div>
            <div class="l2-1">
                <div class="l2-1-1">
                    <img src="/img/O8R1X%6054$6%5D@SQQ61VH200H_tmb.jpg" alt="" width="300" height="160">
                </div>
                <a href="article/articles[i].articleid">
                <div class="l2-1-2">
                    <h1>强哥聊：IT行业激荡30年-技术与架构演进</h1>
                    <p>
                        作者：2 &nbsp;&nbsp;
                        类别：1&nbsp;&nbsp;
                        日期：Mon,06 Apr 2020 00：53：46 GMT&nbsp;&nbsp;
                        阅读：6次&nbsp;&nbsp;
                        消耗积分：2
                    </p>
                    <br>
                    <p class="text1"></p>
                </div>
                </a>
            </div>
        </div>
        <div class="l3">
            <a href="#">上一页</a>&nbsp;&nbsp;
            <a href="#" style="width: 50px">1</a>&nbsp;&nbsp;
            <a href="#" style="width: 50px">2</a>&nbsp;&nbsp;
            <a href="#" style="width: 50px">3</a>&nbsp;&nbsp;
            <a href="#">下一页</a>&nbsp;&nbsp;
        </div>
    </div>
    <div class="right">
        <div class="search"><input type="text" placeholder="请输入关键字" id="searchInput">
        <button onclick="searchData()">搜 &nbsp; 索</button>
    </div>
        <div class="hot">
            <div class="zuixin"><p>最新文章</p></div>
            <p>1. Web系统开发框架特性对比分析</p>
            <p>2. Web系统开发框架特性对比分析</p>
            <p>3. Web系统开发框架特性对比分析</p>
            <p>4. Web系统开发框架特性对比分析</p>
            <p>5. Web系统开发框架特性对比分析</p>
            <p>6. Web系统开发框架特性对比分析</p>
            <p>7. Web系统开发框架特性对比分析</p>
            <p>8. Web系统开发框架特性对比分析</p>
            <p>9. Web系统开发框架特性对比分析</p>
        </div>
        <div class="new">
            <div class="tebie"><p>特别文章</p></div>
            <p>1. Web系统开发框架特性对比分析</p>
            <p>2. Web系统开发框架特性对比分析</p>
            <p>3. Web系统开发框架特性对比分析</p>
            <p>4. Web系统开发框架特性对比分析</p>
            <p>5. Web系统开发框架特性对比分析</p>
            <p>6. Web系统开发框架特性对比分析</p>
            <p>7. Web系统开发框架特性对比分析</p>
            <p>8. Web系统开发框架特性对比分析</p>
            <p>9. Web系统开发框架特性对比分析</p>
        </div>
    </div>
    <br>
</div>
<script src="/js/jquery-3.4.1.min.js"></script>
<script>
    // let html_str = ""
    $(document).ready(function (){
        $.ajax({
            url: "article/list/1",
            type: "GET",
            dataType: "json",
            data:{},
            success: function (data){
                if(data.code == 1){
                    let articles = data.info;
                    let html_str = "";
                    for(let i = 0; i < articles.length; i++){
                        content = ""
                        let p = document.createElement("p");
                        p.innerHTML = articles[i].content;
                        content = p.innerText.replaceAll('\n','')
                        html_str += '<div class="l2-1-1">\n' +
                                    '<img src="/img/O8R1X%6054$6%5D@SQQ61VH200H_tmb.jpg" alt="" width="300" height="150">\n' +
                                    '</div>\n' +
                                    '<a href="/article/'+articles[i].articleid+'">\n' +
                                    '<div class="l2-1-2">\n' +
                                    '    <h1>' + articles[i].headline +'</h1>\n' +
                                    '    <p>\n' +
                                    '        <span>作者：'+articles[i].nickname+'&nbsp;&nbsp;\n' +
                                    '        <span>类别：'+articles[i].type+'&nbsp;&nbsp;\n' +
                                    '        <span>日期：'+articles[i].updatetime+'&nbsp;&nbsp;\n' +
                                    '        <span>阅读：'+articles[i].readcount+'次&nbsp;&nbsp;\n' +
                                    '        <span>消耗积分：'+articles[i].credit+'分\n' +
                                    '    </p>\n' +
                                    '    <br>\n' +
                                    '   <p class="text1">\n' + content + '\n' +
                                    '</div>' +
                                    '</a>\n';
                    }
                    console.log(html_str);
                    $('.l2').empty();
                    $('.l2').append(html_str);

                    let page_str = '<div class="l3">'
                    let max_page = data.page.max_page;
                    let now_page = data.page.now_page;
                    if(now_page == 1){
                        page_str += '<a href="#">上一页</a>&nbsp;&nbsp';
                        page_str += '<a href="#" class="active" style="width: 50px">1</a>&nbsp;&nbsp';
                        page_str += '<a href="javascript:getData(2)" style="width: 50px">2</a>&nbsp;&nbsp';
                        page_str += '<a href="javascript:getData(3)" style="width: 50px">3</a>&nbsp;&nbsp';
                        page_str += '<a href="javascript:getData(2)">下一页</a>&nbsp;&nbsp';
                    }
                    else if(now_page == 2){
                        page_str += '<a href="javascript:getData(1)">上一页</a>&nbsp;&nbsp';
                        page_str += '<a href="javascript:getData(1)" style="width: 50px">1</a>&nbsp;&nbsp';
                        page_str += '<a href="#" class="active" style="width: 50px">2</a>&nbsp;&nbsp';
                        page_str += '<a href="javascript:getData(3)" style="width: 50px">3</a>&nbsp;&nbsp';
                        page_str += '<a href="javascript:getData(4)" style="width: 50px">4</a>&nbsp;&nbsp';
                        page_str += '<a href="javascript:getData(3)">下一页</a>&nbsp;&nbsp';
                    }
                    else if(now_page == max_page){
                        page_str += '<a href="javascript:getData('+(now_page-1)+')">上一页</a>&nbsp;&nbsp';
                        page_str += '<a href="javascript:getData('+(now_page-2)+')" style="width: 50px">'+(now_page-2)+'</a>&nbsp;&nbsp';
                        page_str += '<a href="javascript:getData('+(now_page-1)+')" style="width: 50px">'+(now_page-1)+'</a>&nbsp;&nbsp';
                        page_str += '<a href="#" class="active" style="width: 50px">3</a>&nbsp;&nbsp';
                        page_str += '<a href="#">下一页</a>&nbsp;&nbsp';
                    }
                    else if(now_page == max_page-1){
                        page_str += '<a href="javascript:getData('+(now_page-1)+')">上一页</a>&nbsp;&nbsp';
                        page_str += '<a href="javascript:getData('+(now_page-2)+')" style="width: 50px">'+(now_page-2)+'</a>&nbsp;&nbsp';
                        page_str += '<a href="javascript:getData('+(now_page-1)+')" style="width: 50px">'+(now_page-1)+'</a>&nbsp;&nbsp';
                        page_str += '<a href="#" class="active" style="width: 50px">'+now_page+'</a>&nbsp;&nbsp';
                        page_str += '<a href="javascript:getData('+(now_page+1)+')" style="width: 50px">'+(now_page+1)+'</a>&nbsp;&nbsp';
                        page_str += '<a href="javascript:getData('+(now_page+1)+')">下一页</a>&nbsp;&nbsp';
                    }
                    else{
                        page_str += '<a href="javascript:getData('+(now_page-1)+')">上一页</a>&nbsp;&nbsp';
                        page_str += '<a href="javascript:getData('+(now_page-2)+')" style="width: 50px">'+(now_page-2)+'</a>&nbsp;&nbsp';
                        page_str += '<a href="javascript:getData('+(now_page-1)+')" style="width: 50px">'+(now_page-1)+'</a>&nbsp;&nbsp';
                        page_str += '<a href="#" class="active" style="width: 50px">'+now_page+'</a>&nbsp;&nbsp';
                        page_str += '<a href="javascript:getData('+(now_page+1)+')" style="width: 50px">'+(now_page+1)+'</a>&nbsp;&nbsp';
                        page_str += '<a href="javascript:getData('+(now_page+1)+')" style="width: 50px">'+(now_page+2)+'</a>&nbsp;&nbsp';
                        page_str += '<a href="javascript:getData('+(now_page+1)+')">下一页</a>&nbsp;&nbsp';
                    }

                    page_str += '</div>'
                    $('.l3').empty();
                    $('.l3').append(page_str);
                }else{
                    alert("当前没有数据")
                }
            },
            error: function(e){
                alert("网络请求失败，请检查网络");
            }
        })
    })

    function getData(page_num){
        let param = "keyword="+$("#searchInput").val()
        $.post('/article/search/'+page_num,param, function (data) {
                if(data.code == 1){
                    let articles = data.info;
                    let html_str = "";
                    for(let i = 0; i < articles.length; i++){
                        content = ""
                        let p = document.createElement("p");
                        p.innerHTML = articles[i].content;
                        content = p.innerText.replaceAll('\n','')
                        html_str += '<div class="l2-1-1">\n' +
                                    '<img src="/img/O8R1X%6054$6%5D@SQQ61VH200H_tmb.jpg" alt="" width="300" height="150">\n' +
                                    '</div>\n' +
                                    '<a href="/article/'+articles[i].articleid+'">\n' +
                                    '<div class="l2-1-2">\n' +
                                    '    <h1>' + articles[i].headline +'</h1>\n' +
                                    '    <p>\n' +
                                    '        <span>作者：'+articles[i].nickname+'&nbsp;&nbsp;\n' +
                                    '        <span>类别：'+articles[i].type+'&nbsp;&nbsp;\n' +
                                    '        <span>日期：'+articles[i].updatetime+'&nbsp;&nbsp;\n' +
                                    '        <span>阅读：'+articles[i].readcount+'次&nbsp;&nbsp;\n' +
                                    '        <span>消耗积分：'+articles[i].credit+'分\n' +
                                    '    </p>\n' +
                                    '    <br>\n' +
                                    '   <p class="text1">\n' + content + '\n' +
                                    '</div>' +
                                    '</a>\n';
                    }
                    console.log(html_str);
                    $('.l2').empty();
                    $('.l2').append(html_str);

                    let page_str = '<div class="l3">'
                    let max_page = data.page.max_page;
                    let now_page = data.page.now_page;
                    if(now_page == 1){
                        page_str += '<a href="#">上一页</a>&nbsp;&nbsp';
                        page_str += '<a href="#" class="active" style="width: 50px">1</a>&nbsp;&nbsp';
                        page_str += '<a href="javascript:getData(2)" style="width: 50px">2</a>&nbsp;&nbsp';
                        page_str += '<a href="javascript:getData(3)" style="width: 50px">3</a>&nbsp;&nbsp';
                        page_str += '<a href="javascript:getData(2)">下一页</a>&nbsp;&nbsp';
                    }
                    else if(now_page == 2){
                        page_str += '<a href="javascript:getData(1)">上一页</a>&nbsp;&nbsp';
                        page_str += '<a href="javascript:getData(1)" style="width: 50px">1</a>&nbsp;&nbsp';
                        page_str += '<a href="#" class="active" style="width: 50px">2</a>&nbsp;&nbsp';
                        page_str += '<a href="javascript:getData(3)" style="width: 50px">3</a>&nbsp;&nbsp';
                        page_str += '<a href="javascript:getData(4)" style="width: 50px">4</a>&nbsp;&nbsp';
                        page_str += '<a href="javascript:getData(3)">下一页</a>&nbsp;&nbsp';
                    }
                    else if(now_page == max_page){
                        page_str += '<a href="javascript:getData('+(now_page-1)+')">上一页</a>&nbsp;&nbsp';
                        page_str += '<a href="javascript:getData('+(now_page-2)+')" style="width: 50px">'+(now_page-2)+'</a>&nbsp;&nbsp';
                        page_str += '<a href="javascript:getData('+(now_page-1)+')" style="width: 50px">'+(now_page-1)+'</a>&nbsp;&nbsp';
                        page_str += '<a href="#" class="active" style="width: 50px">3</a>&nbsp;&nbsp';
                        page_str += '<a href="#">下一页</a>&nbsp;&nbsp';
                    }
                    else if(now_page == max_page-1){
                        page_str += '<a href="javascript:getData('+(now_page-1)+')">上一页</a>&nbsp;&nbsp';
                        page_str += '<a href="javascript:getData('+(now_page-2)+')" style="width: 50px">'+(now_page-2)+'</a>&nbsp;&nbsp';
                        page_str += '<a href="javascript:getData('+(now_page-1)+')" style="width: 50px">'+(now_page-1)+'</a>&nbsp;&nbsp';
                        page_str += '<a href="#" class="active" style="width: 50px">'+now_page+'</a>&nbsp;&nbsp';
                        page_str += '<a href="javascript:getData('+(now_page+1)+')" style="width: 50px">'+(now_page+1)+'</a>&nbsp;&nbsp';
                        page_str += '<a href="javascript:getData('+(now_page+1)+')">下一页</a>&nbsp;&nbsp';
                    }
                    else{
                        page_str += '<a href="javascript:getData('+(now_page-1)+')">上一页</a>&nbsp;&nbsp';
                        page_str += '<a href="javascript:getData('+(now_page-2)+')" style="width: 50px">'+(now_page-2)+'</a>&nbsp;&nbsp';
                        page_str += '<a href="javascript:getData('+(now_page-1)+')" style="width: 50px">'+(now_page-1)+'</a>&nbsp;&nbsp';
                        page_str += '<a href="#" class="active" style="width: 50px">'+now_page+'</a>&nbsp;&nbsp';
                        page_str += '<a href="javascript:getData('+(now_page+1)+')" style="width: 50px">'+(now_page+1)+'</a>&nbsp;&nbsp';
                        page_str += '<a href="javascript:getData('+(now_page+1)+')" style="width: 50px">'+(now_page+2)+'</a>&nbsp;&nbsp';
                        page_str += '<a href="javascript:getData('+(now_page+1)+')">下一页</a>&nbsp;&nbsp';
                    }


                    page_str += '</div>'
                    $('.l3').empty();
                    $('.l3').append(page_str);
                }else{
                    alert("当前没有数据")
                }
        });
    }

    function searchData(){

        let param = "keyword="+$("#searchInput").val()
        $.post('/article/search/1', param, function (data) {
            if(data.code == 1) {
                let articles = data.info;
                let html_str = "";
                for (let i = 0; i < articles.length; i++) {
                    content = ""
                    let p = document.createElement("p");
                    p.innerHTML = articles[i].content;
                    content = p.innerText.replaceAll('\n', '')
                    html_str += '<div class="l2-1-1">\n' +
                        '<img src="/img/O8R1X%6054$6%5D@SQQ61VH200H_tmb.jpg" alt="" width="300" height="150">\n' +
                        '</div>\n' +
                        '<a href="/article/' + articles[i].articleid + '">\n' +
                        '<div class="l2-1-2">\n' +
                        '    <h1>' + articles[i].headline + '</h1>\n' +
                        '    <p>\n' +
                        '        <span>作者：' + articles[i].nickname + '&nbsp;&nbsp;\n' +
                        '        <span>类别：' + articles[i].type + '&nbsp;&nbsp;\n' +
                        '        <span>日期：' + articles[i].updatetime + '&nbsp;&nbsp;\n' +
                        '        <span>阅读：' + articles[i].readcount + '次&nbsp;&nbsp;\n' +
                        '        <span>消耗积分：' + articles[i].credit + '分\n' +
                        '    </p>\n' +
                        '    <br>\n' +
                        '   <p class="text1">\n' + content + '\n' +
                        '</div>' +
                        '</a>\n';
                }
                console.log(html_str);
                $('.l2').empty();
                $('.l2').append(html_str);

                let page_str = '<div class="l3">'
                let max_page = data.page.max_page;
                let now_page = data.page.now_page;
                if (now_page == 1) {
                    page_str += '<a href="#">上一页</a>&nbsp;&nbsp';
                    page_str += '<a href="#" class="active" style="width: 50px">1</a>&nbsp;&nbsp';
                    page_str += '<a href="javascript:getData(2)" style="width: 50px">2</a>&nbsp;&nbsp';
                    page_str += '<a href="javascript:getData(3)" style="width: 50px">3</a>&nbsp;&nbsp';
                    page_str += '<a href="javascript:getData(2)">下一页</a>&nbsp;&nbsp';
                }
                else if (now_page == 2) {
                    page_str += '<a href="javascript:getData(1)">上一页</a>&nbsp;&nbsp';
                    page_str += '<a href="javascript:getData(1)" style="width: 50px">1</a>&nbsp;&nbsp';
                    page_str += '<a href="#" class="active" style="width: 50px">2</a>&nbsp;&nbsp';
                    page_str += '<a href="javascript:getData(3)" style="width: 50px">3</a>&nbsp;&nbsp';
                    page_str += '<a href="javascript:getData(4)" style="width: 50px">4</a>&nbsp;&nbsp';
                    page_str += '<a href="javascript:getData(3)">下一页</a>&nbsp;&nbsp';
                }
                else if (now_page == max_page) {
                    page_str += '<a href="javascript:getData(' + (now_page - 1) + ')">上一页</a>&nbsp;&nbsp';
                    page_str += '<a href="javascript:getData(' + (now_page - 2) + ')" style="width: 50px">' + (now_page - 2) + '</a>&nbsp;&nbsp';
                    page_str += '<a href="javascript:getData(' + (now_page - 1) + ')" style="width: 50px">' + (now_page - 1) + '</a>&nbsp;&nbsp';
                    page_str += '<a href="#" class="active" style="width: 50px">3</a>&nbsp;&nbsp';
                    page_str += '<a href="#">下一页</a>&nbsp;&nbsp';
                }
                else if (now_page == max_page - 1) {
                    page_str += '<a href="javascript:getData(' + (now_page - 1) + ')">上一页</a>&nbsp;&nbsp';
                    page_str += '<a href="javascript:getData(' + (now_page - 2) + ')" style="width: 50px">' + (now_page - 2) + '</a>&nbsp;&nbsp';
                    page_str += '<a href="javascript:getData(' + (now_page - 1) + ')" style="width: 50px">' + (now_page - 1) + '</a>&nbsp;&nbsp';
                    page_str += '<a href="#" class="active" style="width: 50px">' + now_page + '</a>&nbsp;&nbsp';
                    page_str += '<a href="javascript:getData(' + (now_page + 1) + ')" style="width: 50px">' + (now_page + 1) + '</a>&nbsp;&nbsp';
                    page_str += '<a href="javascript:getData(' + (now_page + 1) + ')">下一页</a>&nbsp;&nbsp';
                }
                else {
                    page_str += '<a href="javascript:getData(' + (now_page - 1) + ')">上一页</a>&nbsp;&nbsp';
                    page_str += '<a href="javascript:getData(' + (now_page - 2) + ')" style="width: 50px">' + (now_page - 2) + '</a>&nbsp;&nbsp';
                    page_str += '<a href="javascript:getData(' + (now_page - 1) + ')" style="width: 50px">' + (now_page - 1) + '</a>&nbsp;&nbsp';
                    page_str += '<a href="#" class="active" style="width: 50px">' + now_page + '</a>&nbsp;&nbsp';
                    page_str += '<a href="javascript:getData(' + (now_page + 1) + ')" style="width: 50px">' + (now_page + 1) + '</a>&nbsp;&nbsp';
                    page_str += '<a href="javascript:getData(' + (now_page + 1) + ')" style="width: 50px">' + (now_page + 2) + '</a>&nbsp;&nbsp';
                    page_str += '<a href="javascript:getData(' + (now_page + 1) + ')">下一页</a>&nbsp;&nbsp';
                }


                page_str += '</div>'
                $('.l3').empty();
                $('.l3').append(page_str);
            }else{
                alert("当前没有数据")
            }
        })
}
</script>
{% endblock %}
